import Tabs, { TabsProps } from '@/components/Tabs';
import { deviceTreeData, getDeviceCascader } from '@/utils/formatterTree';
import { useIntl } from '@umijs/max';
import { Radio, Space } from 'antd';
import React, { useEffect, useRef, useState } from 'react';
import Chart from './component/Chart';
import List, { ToolBarRender } from './component/List';

interface treeNode extends deviceTreeData {
  name: string | undefined;
  code: string | number | undefined;
  children: treeNode[];
}

const replaceTreePropertiesByArea = (tree: deviceTreeData[]): treeNode[] => {
  return tree.map((node) => ({
    code: node.uniqueId,
    name: node.deviceName,
    disabled: node.nodeType === 'AREA',
    children: node.subDevices ? replaceTreePropertiesByArea(node.subDevices) : undefined,
  }));
};
const replaceTreeProperties = (tree: deviceTreeData[]): treeNode[] => {
  return tree.map((node) => ({
    code: node.uniqueId,
    name: node.deviceName,
    children: node.subDevices ? replaceTreeProperties(node.subDevices) : undefined,
  }));
};
const Index: React.FC = () => {
  const intl = useIntl();
  const listRef = useRef(null);
  const [deviceInfo, setDeviceInfo] = useState([]);
  const [clusterInfo, setClusterInfo] = useState([]);
  useEffect(() => {
    // deviceControllerGetDeviceLevelInfo({ stationId: initialState?.stationId, needBmu: true }).then(
    //   (res) => {
    //     const data = res?.data || {};
    //
    //     const combinedTree: API.DeviceInfo[] = [
    //       ...(data?.deviceBoxInfos ?? []),
    //       ...(data?.deviceBmsInfos ?? []),
    //       ...(data?.deviceClusterInfos ?? []),
    //     ];
    //     const nodeMapping = {};
    //     for (const node of combinedTree) {
    //       node.children = [];
    //       nodeMapping[node.id] = node;
    //     }
    //     const tree: API.DeviceInfo[] = [];
    //     combinedTree.forEach((node) => {
    //       if (node.parentId === 0) {
    //         tree.push(node);
    //       } else if (nodeMapping[node.parentId]) {
    //         nodeMapping[node.parentId].children.push(node);
    //       }
    //     });
    //     // setDeviceInfo([
    //     //   {
    //     //     ...stationInfo,
    //     //     children: tree,
    //     //     name: stationInfo?.stationName,
    //     //     code: stationInfo?.stationCode,
    //     //     id: 0,
    //     //   },
    //     // ]);
    //
    //     const combinedTree2: API.DeviceInfo[] = [
    //       ..._.cloneDeep(res?.data?.deviceClusterInfos ?? []),
    //       ..._.cloneDeep(res?.data?.deviceBmuInfos ?? []),
    //     ];
    //     const nodeMapping2 = {};
    //     const tree2: API.DeviceInfo[] = [];
    //     for (const node of combinedTree2) {
    //       node.children = [];
    //       nodeMapping2[node.id] = node;
    //       if (node.type === 'CLUSTER') {
    //         tree2.push(node);
    //       }
    //     }
    //     combinedTree2.forEach((node) => {
    //       if (node.parentId === 0) {
    //         tree2.push(node);
    //       } else if (nodeMapping2[node.parentId]) {
    //         nodeMapping2[node.parentId].children.push(node);
    //       }
    //     });
    //     setClusterInfo(tree2);
    //   },
    // );
    getDeviceCascader(false, undefined, ['AREA', 'CLUSTER', 'BMU']).then((res) => {
      setClusterInfo(replaceTreePropertiesByArea(res[0].subDevices));
    });
    getDeviceCascader(false, undefined, ['AREA', 'BMS', 'BOX', 'CLUSTER', 'CABINET']).then(
      (res) => {
        setDeviceInfo(replaceTreeProperties(res));
      },
    );
  }, []);

  const [showType, setShowType] = useState('2');

  const items: TabsProps['items'] = [
    {
      key: '1',
      label: intl.formatMessage({ id: 'statistics.curve.soc' }),
      children:
        showType === '1' ? (
          <List type={1} deviceInfo={deviceInfo} ref={listRef} />
        ) : (
          <Chart type={1} deviceInfo={deviceInfo} />
        ),
    },
    {
      key: '2',
      label: intl.formatMessage({ id: 'statistics.curve.battery' }),
      children:
        showType === '1' ? (
          <List type={2} deviceInfo={clusterInfo} ref={listRef} />
        ) : (
          <Chart type={2} deviceInfo={clusterInfo} />
        ),
    },
    {
      key: '3',
      label: intl.formatMessage({ id: 'statistics.curve.current' }),
      children:
        showType === '1' ? (
          <List type={3} deviceInfo={clusterInfo} ref={listRef} />
        ) : (
          <Chart type={3} deviceInfo={clusterInfo} />
        ),
    },
  ];

  return (
    <div>
      <Tabs
        items={items}
        destroyInactiveTabPane={true}
        tabBarExtraContent={
          <Space>
            <Radio.Group
              value={showType}
              buttonStyle="solid"
              onChange={(event) => {
                setShowType(event?.target.value);
              }}
              className="global-group-radio-button"
            >
              <Radio.Button value="1">
                {intl.formatMessage({ id: 'statistics.common.list' })}
              </Radio.Button>
              <Radio.Button value="2">
                {intl.formatMessage({ id: 'statistics.common.chart' })}
              </Radio.Button>
            </Radio.Group>
            {showType === '1' && <ToolBarRender tableRef={listRef} />}
          </Space>
        }
      />
    </div>
  );
};
export default Index;
